<template>
	<view class="AllOrder bigestBox">
		<template>
			<up-tabs :list="list1" @click="click" :scrollable="false" :current="currentTab" :activeStyle="{
				color: '#0F4C97', fontWeight: 600
			}"></up-tabs>
		</template>
		<template v-if="showCustomerOrders">
			<customer-orders></customer-orders>
		</template>
		<template v-else>
			<product-orders :initial-order-type="initialProductOrderType"></product-orders>
		</template>
	</view>
</template>

<script>
import customerOrders from '../../components/AllOrders/customerOrders.vue';
import productOrders from '../../components/AllOrders/productOrders.vue';
export default {
	data() {
		return {
			list1: [{
				name: "客房订单"
			},
			{
				name: "商品订单"
			}
			],
			currentTab: 0,
			initialProductOrderType: 8 // 默认值为 8 (全部), 用于传递给 product-orders
		};
	},
	onLoad(options) {
		console.log('AllOrderPage onLoad:', options); // 添加日志方便调试
		if (options && options.tab === 'product') {
			this.currentTab = 1;
		} else {
			this.currentTab = 0;
		}
		// 获取 orderType 参数, 并传递给 product-orders 组件
		if (options && options.orderType) {
			this.initialProductOrderType = options.orderType;
		}
	},
	methods: {
		click(item) {
			this.currentTab = item.index;
		},
	},
	computed: {
		showCustomerOrders() {
			return this.currentTab === 0;
		}
	},
	components: {
		customerOrders,
		productOrders
	}
}
</script>

<style lang="less" scoped>
	@import "../../static/commonStyleLess/grayBox.less";

	.AllOrder {

		// 修改tabs的样式
		::v-deep .u-tabs__wrapper__nav__line {
			background: #0F4C97 !important;
		}
		
		::v-deep .u-tabs__wrapper__nav__item {
			background-color: #FFFFFF;
		}

		::v-deep .u-tabs__wrapper__nav__item__text {
			font-weight: 400;
			font-size: 28rpx;
			text-align: center;
		}

		// 公共样式部分
		font-family: 'PingFang SC';
		letter-spacing: -0.82rpx;
		font-weight: 400;
		letter-spacing: 0px;

		

	}
</style>